<template>
  <div class="checkin-config">
    <el-row :gutter="20">
      <!-- 左侧：入住配置表单（完全保留原代码） -->
      <el-col :span="16">
        <div class="main-title">入住配置</div>

        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="120px"
          class="form-box"
        >
          <!-- 入住开始时间 -->
          <el-form-item label="入住开始时间" prop="startTime">
            <el-date-picker
              v-model="form.startTime"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>

          <!-- 入住结束时间 -->
          <el-form-item label="入住结束时间" prop="endTime">
            <el-date-picker
              v-model="form.endTime"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>

          <!-- 护理等级ID - 修改为下拉选择 -->
          <el-form-item label="护理等级ID" prop="careLevelId">
            <el-select v-model="form.careLevelId" placeholder="请选择护理等级" clearable>
              <el-option
                v-for="level in careLevelList"
                :key="level"
                :label="level"
                :value="String(level)" 
              />
            </el-select>
          </el-form-item>

          <!-- 床位号 - 修改为下拉选择 -->
          <el-form-item label="床位号" prop="bedNo">
            <el-select v-model="form.bedNo" placeholder="请选择床位号" clearable>
              <el-option
                v-for="bed in bedList"
                :key="bed"
                :label="bed"
                :value="bed"  
              />
            </el-select>
          </el-form-item>

          <!-- 费用开始时间 -->
          <el-form-item label="费用开始时间" prop="feeStartTime">
            <el-date-picker
              v-model="form.feeStartTime"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>

          <!-- 费用结束时间 -->
          <el-form-item label="费用结束时间" prop="feeEndTime">
            <el-date-picker
              v-model="form.feeEndTime"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>

          <!-- 押金 -->
          <el-form-item label="押金(元)" prop="deposit">
            <el-input-number v-model="form.deposit" :min="0" />
          </el-form-item>

          <!-- 护理费用 -->
          <el-form-item label="护理费用(元/月)" prop="careFee">
            <el-input-number v-model="form.careFee" :min="0" />
          </el-form-item>

          <!-- 床位费用 -->
          <el-form-item label="床位费用(元/月)" prop="bedFee">
            <el-input-number v-model="form.bedFee" :min="0" />
          </el-form-item>

          <!-- 其他费用 -->
          <el-form-item label="其他费用(元/月)" prop="otherFee">
            <el-input-number v-model="form.otherFee" :min="0" />
          </el-form-item>

          <!-- 医保支付 -->
          <el-form-item label="医保支付(元/月)" prop="insurancePay">
            <el-input-number v-model="form.insurancePay" :min="0" />
          </el-form-item>

          <!-- 政府补贴 -->
          <el-form-item label="政府补贴(元/月)" prop="govSubsidy">
            <el-input-number v-model="form.govSubsidy" :min="0" />
          </el-form-item>
        </el-form>
      </el-col>

      <!-- 右侧：操作记录（按规则修改布局） -->
      <el-col :span="8">
        <div class="record-box">
          <div class="record-title">操作记录</div>
          <!-- 自定义操作记录列表 -->
          <div class="record-list">
            <!-- 单条操作记录 -->
            <div v-for="(item, index) in operationRecords" :key="index" class="record-item">
              <!-- 第一行：任务名称（左） + 结束时间/正在处理（右） -->
              <div class="record-header">
                <span class="task-name">{{ item.action }}</span>
                <span class="end-time">{{ item.endTimeText }}</span>
              </div>
              <!-- 第二行：操作人（括号内状态与结束时间关联） -->
              <div class="record-operator">{{ item.operator }}（{{ item.statusText }}）</div>
            </div>
            <!-- 空数据提示 -->
            <div v-if="operationRecords.length === 0" class="empty-record">暂无操作记录</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 页面底部按钮（完全保留原代码） -->
    <div class="bottom-buttons">
      <el-button @click="onBack">返回</el-button>
      <el-button type="primary" @click="onSubmit">提交配置</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { checkInConfig, getApprovalRecord,getCareLevelAndBedList } from "@/api/checkInApply/checkInApply"; // 引入操作记录接口
import { ElMessage } from "element-plus";

// 表单引用（保留原代码）
const formRef = ref();
const route = useRoute();
const router = useRouter();

// 护理等级列表和床位列表 - 新增
const careLevelList = ref([]);
const bedList = ref([]);

// 表单数据（保留原代码）
const form = reactive({
  startTime: "",
  endTime: "",
  careLevelId: "",  // 字符串类型
  bedNo: "",        // 字符串类型
  feeStartTime: "",
  feeEndTime: "",
  deposit: null,
  careFee: null,
  bedFee: null,
  otherFee: null,
  insurancePay: null,
  govSubsidy: null,
  bussinessId: "", // 流程实例ID
  taskId: "" // 任务ID
});

// 操作记录：reactive数组（按规则存储字段）
const operationRecords = reactive([]);
// 静态 fallback 记录（接口失败时用，新增endTime字段）
const staticRecords = [
  {
    action: "发起申请 - 申请入住",
    operator: "周延华",
    endTime: "2048-10-15 09:00:00", // 有结束时间
    endTimeText: "2048-10-15 09:00:00",
    statusText: "已完成"
  },
  {
    action: "(角色) 处理入住评估",
    operator: "锺再兰",
    endTime: null, // 无结束时间
    endTimeText: "正在处理",
    statusText: "正在处理"
  }
];

// 表单校验规则（保留原代码）
const rules = {
  startTime: [{ required: true, message: "请选择入住开始时间", trigger: "change" }],
  endTime: [{ required: true, message: "请选择入住结束时间", trigger: "change" }],
  careLevelId: [{ required: true, message: "请输入护理等级", trigger: "blur" }],
  bedNo: [{ required: true, message: "请选择床位号", trigger: "change" }]
};

// 核心：格式化操作记录（按你的规则）
const formatRecord = (apiItem) => {
  // 接口返回的字段映射（若从getApprovalRecord获取）
  const taskInfo = apiItem?.taskInfo || {};
  const userInfo = apiItem?.userInfo || {};

  // 规则1：有endTime显示格式化时间，无则"正在处理"
  const hasEndTime = !!taskInfo.endTime;
  const endTimeText = hasEndTime
    ? new Date(taskInfo.endTime).toLocaleString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false
      }).replace(/\//g, "-")
    : "正在处理";

  // 规则2：有endTime状态"已完成"，无则"正在处理"
  const statusText = hasEndTime ? "已完成" : "正在处理";

  return {
    action: taskInfo.name || apiItem.action || "未知操作", // 任务名称
    operator: userInfo.userName || apiItem.operator || "未知用户", // 操作人
    endTime: taskInfo.endTime || apiItem.endTime, // 原始结束时间
    endTimeText: endTimeText, // 格式化后时间文本
    statusText: statusText // 关联状态
  };
};

// 页面加载：获取流程参数 + 加载操作记录
onMounted(() => {
  // 原有逻辑：获取流程参数
  form.bussinessId = route.query.processInstanceId || "";
  form.taskId = route.query.taskId || "";
  
  // 新增：获取护理等级和床位列表
  getCareLevelAndBedList()
    .then((res)=>{
      if(res.code === 200 ){ 
        // 确保护理等级列表中的值都是字符串
        careLevelList.value = (res.data.careLevelList || []).map(level => String(level));
        bedList.value = res.data.bedList || [];
      }
    });

  // 新增逻辑：加载操作记录（优先接口，其次静态数据）
  getApprovalRecord({ businessId: form.bussinessId })
    .then((res) => {
      if (res.code === 200 && res.data.length) {
        operationRecords.length = 0; // 清空
        res.data.forEach((item) => {
          operationRecords.push(formatRecord(item));
        });
      } else {
        // 接口无数据，用静态记录
        operationRecords.push(...staticRecords.map(record => formatRecord(record)));
      }
    })
    .catch((err) => {
      console.error("获取操作记录失败：", err);
      ElMessage.warning("操作记录加载失败，显示默认记录");
      operationRecords.push(...staticRecords.map(record => formatRecord(record)));
    });
});

// 提交表单（修改：成功后追加操作记录）
const onSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return;
    try {
      // 确保提交的数据格式正确
      const submitData = {
        ...form,
        // 确保 careLevelId 和 bedNo 是字符串
        careLevelId: String(form.careLevelId),
        bedNo: String(form.bedNo),
        // 确保数字字段是数字类型
        deposit: Number(form.deposit) || 0,
        careFee: Number(form.careFee) || 0,
        bedFee: Number(form.bedFee) || 0,
        otherFee: Number(form.otherFee) || 0,
        insurancePay: Number(form.insurancePay) || 0,
        govSubsidy: Number(form.govSubsidy) || 0
      };
      
      console.log("提交的数据:", submitData); // 调试用
      
      await checkInConfig(submitData);
      ElMessage.success("入住配置提交成功！");

      // 追加"提交配置"操作记录（有结束时间→已完成）
      const newRecord = {
        action: "入住配置-提交",
        operator: "当前用户", // 实际项目替换为登录用户昵称
        endTime: new Date().toISOString(),
        endTimeText: new Date().toLocaleString("zh-CN", {
          year: "numeric",
          month: "2-digit",
          day: "2-digit",
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit",
          hour12: false
        }).replace(/\//g, "-"),
        statusText: "已完成"
      };
      operationRecords.unshift(newRecord); // 追加到顶部
    } catch (err) {
      console.error(err);
      ElMessage.error("提交失败，请稍后重试！");
    }
  });
};

// 返回按钮（保留原代码）
const onBack = () => {
  router.back();
};
</script>

<style scoped>
/* 保留所有原有样式，新增操作记录相关样式 */
.checkin-config {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  min-height: 80vh;
}

.main-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.form-box {
  max-width: 600px;
}

.record-box {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px 20px;
  height: 100%;
}

.record-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 新增：操作记录布局样式 */
.record-list {
  width: 100%;
}

.record-item {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

/* 第一行：任务名左，时间右 */
.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.task-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.end-time {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
}

/* 第二行：操作人及状态 */
.record-operator {
  font-size: 13px;
  color: #666;
}

/* 空数据提示 */
.empty-record {
  padding: 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

/* 原有底部按钮样式 */
.bottom-buttons {
  text-align: center;
  margin-top: 30px;
}

.bottom-buttons .el-button {
  margin: 0 10px;
  padding: 10px 30px;
}
</style>